<template>
  <div class="mid-bar-family">
    <el-card class="box-card">
      <div class="card-fontup">
        <font-awesome-icon icon="home"
                           style="color:#4682b4" />
        <span style="color:#4682b4">我的家庭</span>
        <span class="card-fontr">1位成员</span>
        <span class="familypic">
          <el-image style="width: 90px; height: 90px"
                    :src="url">
          </el-image>
        </span>
      </div>
      <div class="card-fontdown">{{ address }}</div>

    </el-card>
  </div>
</template>

<script>
export default {
  name: 'midfamily',
  data () {
    return {
      address: '广东珠海京师家园-住宅-3幢-301',
      url: require('../../assets/images/MineImages/family.jpg')
    }
  }
}
</script>

<style scoped>
.mid-bar-family {
  margin-top: 10px;
}
.card-fontup {
  font-size: 1rem;
  font-weight: bold;
}
.card-fontr {
  font-size: 0.5rem;
  color: rgba(128, 128, 128, 0.438);
  margin-left: 5px;
}
.card-fontdown {
  font-size: 0.8rem;
  margin-top: 25px;
  color: #778899;
}
.familypic {
  float: right;
}
</style>
